<template>
  <div class="detail_box">
    <el-row :gutter="32">
      <el-col :span="16">
        <video ref="video" controls autoplay></video>
      </el-col>
      <el-col :span="8">
        <div style="margin-top: 20px;">
          <el-radio-group class="job_list" v-model="selectVideo" @change="changeVideo">
            <el-radio v-for="(item, index) in videoList" :label="item.id" :key="item.id" style="margin-bottom: 10px;">
              {{ item.name || '-' }}
            </el-radio>
          </el-radio-group>
        </div>
      </el-col>
    </el-row>
    <!-- <el-row style="margin: 60px 0 20px 0;" :gutter="24">
      <el-col :span="6">
        <div class="small_video" @click="openVideo">
          <video src="http://jdvoddkgb2slb.vod.126.net/jdvoddkgb2slb/5409c53e43054ef590c120194aa0385b9386-1347754848176108-1709650318-0.flv"></video>
        </div>
        <div class="content">2023-12-2 18:00</div>
        <div class="content">作业准备</div>
      </el-col>
      <el-col :span="6">
        <div class="small_video" @click="openVideo">
          <video src=""></video>
        </div>
        <div class="content">2023-12-2 18:00</div>
        <div class="content">器具材料检查</div>
      </el-col>
      <el-col :span="6">
        <div class="small_video" @click="openVideo">
          <video src=""></video>
        </div>
        <div class="content">2023-12-2 18:00</div>
        <div class="content">安全措施</div>
      </el-col>
      <el-col :span="6">
        <div class="small_video" @click="openVideo">
          <video src=""></video>
        </div>
        <div class="content">2023-12-2 18:00</div>
        <div class="content">安全交底</div>
      </el-col>
    </el-row> -->
  </div>
</template>
<script>
import { getListByTicket } from '@/api/video/index'
import flvjs from 'flv.js';
export default {
  name: "videoDetail",
  props:{
    videoDetail:{
      type:Object
    }
  },
  data() {
    return {
      selectVideo: null,
      videoList: []
    };
  },
  created() {
    
  },
  mounted() {
    this.getList()
  },
  beforeDestroy() {
    if (this.flvPlayer) {
      this.flvPlayer.destroy();
    }
  },
  methods: {
    changeVideo(id) {
      let item = this.videoList.find(item => item.id === parseInt(id))
      this.initFlv(item)
    },
    getList() {
      getListByTicket({jobTicketId: this.videoDetail.id}).then(res => {
        if(res.data.length > 0) {
          this.videoList = res.data
          this.selectVideo = res.data[0].id
          this.initFlv(res.data[0])
        }
      })
    },
    initFlv(item) {
      let url = item.content.replace('http','https')
      if (flvjs.isSupported()) {
        const videoElement = this.$refs.video;
        const flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: url
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
      }
    },
    openVideo() {
      console.log('嗷嗷')
    }
  }
};
</script>
<style scoped="scoped" lang="scss">
.detail_box {
  padding: 20px 20px 40px 20px;
}
video {
  width: 100%;
}
.content {
  text-align: center;
  margin: 10px 0;
}
.small_video {
  cursor: pointer;
}
.job_list {
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    
  }
</style>
